<template>
    <div>
      <ul>
        <li :class="posname">
          <em><slot name="img"></slot></em>
          <slot name="message"></slot>
         <slot name="messageDurg"></slot>
        </li>
      </ul>

     <!-- <div v-if="isadvice">
        <i class="msg-text">2017-08-15 13:21</i>
        <i class="msg-text">患者发起了处方药购药咨询，请审批并解答患者的处方药问题，</i>
        <ul>
          <li :class="posname">
            <em>
              <img src="http://img1.shikee.com/try/2016/06/23/14381920926024616259.jpg"/>
            </em>
            <div class="sick-case">
              <span class="sick-case-hd">药品分类药品分类药品分类药品分类（二级）</span>
              <div class="sick-case-bd">
                <p>商品名商品名商品名商品名商品名商品名+通用名（最多10字）</p>
                <p>包装规格</p>
                <p>需求数量：X盒</p>
              </div>
              <yd-button class="f-float-btn" size="large" bgcolor="#c8d4fc" color="#4871f1" @click.native="confirm(pos)">{{ btnname }}</yd-button>
            </div>
          </li>
          &lt;!&ndash;<li class="right-item">
            <em>
              <img src="http://img1.shikee.com/try/2016/06/23/14381920926024616259.jpg"/>
            </em>
            <div class="sick-case">
              <span class="sick-case-hd">药品分类（二级）</span>
              <div class="sick-case-bd">
                <p>商品名+通用名（最多10字）</p>
                <p>包装规格</p>
                <p>需求数量：X盒</p>
              </div>
              <yd-button class="f-float-btn" size="large" bgcolor="#bebebe" color="#fff" disabled>已确定</yd-button>
            </div>
          </li>
          <li class="right-item">
            <em>
              <img src="http://img1.shikee.com/try/2016/06/23/14381920926024616259.jpg"/>
            </em>
            <p>
              <img :src="imgPath"/>
            </p>
          </li>&ndash;&gt;
        </ul>
      </div>-->
    </div>
</template>
<style>

  .yd-ls-message em {
    width: 0.9rem;
    height: 0.9rem;
    line-height: 0.9rem;
    background-color: pink;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    overflow: hidden;
  }

  .yd-ls-message em img {
    width: 100%;
    height: 100%;
  }

  .yd-ls-message .msg-con {
    padding: 0.2rem;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    font-size: 0.28rem;
    max-width: 4.8rem;
    margin-top: 0.09rem;
  }
  .yd-ls-message .msg-con {
    text-align: left;
  }

  .yd-ls-message div.sick-case:after,
  .yd-ls-message .msg-con:after {
    content: '';
    width: 0.2rem;
    height: 0.2rem;
    position: absolute;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
  }

  .yd-ls-message .left-item,
  .yd-ls-message .right-item {
    overflow: hidden;
    margin-bottom: 0.3rem;
  }

  .yd-ls-message .left-item .msg-con img,
  .yd-ls-message .right-item .msg-con img {
    width: 100%;
  }

  .yd-ls-message .left-item .msg-con,
  .yd-ls-message .left-item em,
  .yd-ls-message .left-item div.sick-case {
    float: left;
  }

  .yd-ls-message .left-item .msg-con,
  .yd-ls-message .left-item div.sick-case,
  .yd-ls-message .right-item div.sick-case {
    background-color: #fff;
    position: relative;
    margin-left: 0.3rem;
  }

  .yd-ls-message .right-item div.sick-case {
    margin-left: 0;
    margin-right: 0.3rem;
  }

  .yd-ls-message .left-item div.sick-case:after,
  .yd-ls-message .left-item .msg-con:after {
    left: -0.11rem;
    top: 0.26rem;
    background-color: #fff;
    border-left: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
  }

  .yd-ls-message .right-item div.sick-case:after {
    right: -0.11rem;
    top: 0.26rem;
    background-color: #fff;
    border-right: 1px solid #e5e5e5;
    border-top: 1px solid #e5e5e5;
  }

  .yd-ls-message .left-item div.sick-case,
  .yd-ls-message .right-item div.sick-case {
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    font-size: 0.28rem;
    width: 4.8rem;
    margin-top: 0.09rem;
    /*overflow: hidden;*/
    text-align: left;
  }

  .yd-ls-message .right-item div.sick-case .sick-case-hd,
  .yd-ls-message .left-item div.sick-case .sick-case-hd {
    padding: 0.2rem;
    display: inline-block;
    width: 100%;
    font-weight: bold;
    border-bottom: 1px solid #e5e5e5;
  }

  .yd-ls-message .right-item div.sick-case .sick-case-bd,
  .yd-ls-message .left-item div.sick-case .sick-case-bd {
    padding: 0.2rem 0.2rem;
    width: 100%;
  }

  .yd-ls-message .right-item div.sick-case .sick-case-bd p,
  .yd-ls-message .left-item div.sick-case .sick-case-bd p {
    background-color: #fff;
    border: 0;
    padding: 0;
    border-radius: 0;
    float: none;
    position: initial;
  }

  .yd-ls-message .right-item div.sick-case .sick-case-bd p:nth-child(1),
  .yd-ls-message .left-item div.sick-case .sick-case-bd p:nth-child(1)  {
    width: 3rem;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
  }

  .yd-ls-message .right-item div.sick-case .sick-case-bd p:after,
  .yd-ls-message .left-item div.sick-case .sick-case-bd p:after {
    content: "";
    display: none;
  }

  .yd-ls-message .right-item div.sick-case button.f-float-btn,
  .yd-ls-message .left-item div.sick-case button.f-float-btn {
    height: 0.7rem;
  }

  .yd-ls-message .right-item .msg-con,
  .yd-ls-message .right-item em,
  .yd-ls-message .right-item div {
    float: right;
  }

  .yd-ls-message .right-item .msg-con {
    background-color: #c8d4fc;
    position: relative;
    margin-right: 0.3rem;
  }
/*

  .yd-ls-message .right-item div.sick-case .sick-case-bd p {
    margin-right: 0;
    margin-left: 0.3rem;
  }
*/

  .yd-ls-message .right-item .msg-con:after {
    right: -0.11rem;
    top: .26rem;
    background-color: #c8d4fc;
    border-right: 1px solid #e5e5e5;
    border-top: 1px solid #e5e5e5;
  }


</style>
<script>
    export default {
        name: '',
        props: {
          pos: String,
          ismsg: {
            type: Boolean,
            defalut: true
          }
        },
        data() {
            return {
              posname: '',
              btnname: '立即下单'
            }
        },
        methods: {
          init () {
            this.posname = `${this.pos}-item`

            if(this.pos === 'right'){
              this.btnname = '已确定'
            }
          },
          confirm () {
            if(this.pos === 'right'){
              alert('right')
            }else {
              alert('left')
            }
          }
        },
        mounted() {
          this.init()
        },
        components: {}


    }
</script>
<style>

</style>
